<template>
	<div id="myfootprint">
		<!-- yours conents -->
		<!--<haders title="我的足迹"></haders>-->
		<scroller ref="scroller" :on-infinite="infinite">
			<div class="mian">
				<ul class="footpront">
					<li v-for="item in items" :key="item.id" @click="skip(item)">
						<i><img :src="item.GoodsImg" alt="加载失败" :onerror="imgError"></i>
						<div>
							<p>{{item.GoodsName}}</p>
							<p class="aline2">{{item.texts}}</p>
							<font>浏览日期: {{item.UTime | tiems}}</font> 
							<p><span>￥{{item.CloudPrice}}</span></p>
						</div>
					</li>
				</ul>
				<!--没有数据时-->
				<!--<no-data v-if="items==0" title="还没有您的足迹~~~"></no-data>-->

			</div>
		</scroller>

	</div>
</template>
<script> 
	import { Indicator } from 'mint-ui';
	export default {
		name: 'myfootprint',
		components: { 
		},
		data() {
			return {
				indexPage: 1, //请求页面索引
				items: [],
				done:'',
				date:''//查询时间
			}
		},
		created() {
			this.imgError = this.$store.state.imgError; 
		},
		mounted() {
		  
		},
		methods: {
			 infinite(done) {
			 	Indicator.open({text: '加载中...'});
				let _this = this;
				_this.done=done; 
				_this.$http.get("/GroupBuy/GetFootprintList", {
					params: {
						"page": this.indexPage,
						"date":this.date
					}
				}).then((res) => {
					console.log(res);
					if(res.data.data.List == "") {
						done(true);
					} else {
						if(_this.indexPage <= res.data.data.TotalPage) {
							_this.indexPage++;
							_this.items = _this.items.concat(res.data.data.List);
							console.log(_this.items);
							setTimeout(function() {
								done()
							}, 3000)
						} else {
							done(true)
						}
					}
					Indicator.close();
				}).catch((err) => {
					console.log(err)
				});
			},
			skip(item){
				this.$router.push({
					path: '/clientele/goodsDetails/' + item.GoodsId
				})
			}
			
		},
		filters: {
			tiems: function(val) {
				if(!val) {
					return ''
				} else {
					return val.replace(/(T|\.\d+)/gim, " ");
				}
			},
			money: function(val) {
				if(!val) {
					val = 0.00;
				} else {
					val = Number(val).toFixed(2);
				}
				return val
			}
		}
	}
</script>
<style scoped>
	.footpront {
		width: 100%;
	}
	
	.footpront li {
		width: 100%;
		padding: 0.3rem;
		border-bottom: 1px solid #CCCCCC;
		background-color: #fff;
		overflow: hidden;
	}
	
	.footpront li:last-child {
		border-bottom: none;
	}
	
	.footpront li i {
		display: inline-block;
		float: left;
		width: 45%;
		height: 3rem;
		margin-right: 0.3rem;
	}
	
	.footpront li i img {
		width: 100%;
		height: 100%;
	}
	
	.footpront li div {
		display: flex;
		flex-direction: column;
		height: 3rem;
		justify-content: space-around;
		font-size: 0.373333rem;
		color: #333333;
	}
	
	.footpront li div p:nth-child(1) {
		font-size: 0.4rem;
	}
	
	.footpront li div p:nth-child(2) {
		color: #666666;
	}
	
	.footpront li div p:nth-child(3) {
		color: #6530E0;
		font-weight: 700;
	}
</style>